<template>
<div class="app-main">
  <vue3-seamless-scroll
    hover="true"
    hover-stop="true"
    :list="data"
    :step="0.3"
    :limit-move-num="4"
  >
    <div class="list">
      <div
        class="list-item"
        v-for="(item,index) in data"
        :key="index"
      >
        <!-- <template v-if="item.hdlb != '1'"> -->
          <span class="list-item-index">{{ index + 1 }}</span>
          <p>
            <span :title="item.iaName" class="list-item-title">{{item.iaName}}</span>
            <span class="list-item-date">{{item.iaTime}}</span>
          </p>
        <!-- </template> -->
      </div>
    </div>
  </vue3-seamless-scroll>
</div>
</template>
<script setup name="Index">
  const props = defineProps({
    data: {
      required: true,
      type: Array,
      default: []
    }
  })
  const list = [
    {
      title: "无缝滚动第一行无缝滚动第一行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第二行无缝滚动第二行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第三行无缝滚动第三行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第四行无缝滚动第四行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第五行无缝滚动第五行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第六行无缝滚动第六行无缝滚动第六行无缝滚动第六行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第七行无缝滚动第七行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第八行无缝滚动第八行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第九行无缝滚动第九行",
      date: "2017-12-16",
    },
  ]
</script>
<style lang="scss" scoped>

.app-main{
  width: 430px;
  height: 185px !important;
  overflow: hidden;
  margin: 10px auto 0;
}
.list {
    width: 430px;
    margin: 0 auto;
    .list-item {
      display: flex;
      justify-content: space-around;
      &-index{
        display: block;
        width: 30px;
        height: 30px;
        background-size: 100% 100%;
        background-image: url('@/assets/images/anbao/bg_scroll_index.png');
        margin: 2px 1px 2px 0;
        color: #46FFFF;
        font-size: 18px;
        line-height: 30px;
        text-align: center;
      }
      p{
        width: 390px;
        height: 35px;
        background-size: 100% 100%;
        background-image: url('@/assets/images/anbao/bg_scroll.png');
        margin: 0 0 15px;
        font-size: 14px;
        color: #fff;
        line-height: 35px;
        box-sizing: border-box;
        padding:0 15px;
        display: flex;
        justify-content: space-between;
      }
      &-title{
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      &-date{
        display: block;
        width: 110px;
        text-align: right;
      }
      
    }
}
</style>